<template>
  <div>
  查询条件
    <el-select v-model="flagval" placeholder="查询条件" style="width: 240px">
    <el-option
      v-for="item in optionsflagval"
      :label="item.label"
      :value="item.value"
      @click="flagvalchange(flagval)"
    />
  </el-select>
    <el-table :data="tableDatalist" v-loading="loadingvalue" style="width: 100%">
      <el-table-column prop="manager_name" label="店长名称" />
      <el-table-column prop="shop_name" label="店铺名称" />
      <el-table-column prop="date_scope" label="时间" />
      <el-table-column label="审核状态">
        <template #default="{ row }">
          <span
            v-if="row.flag == '1'"
            style="
              background-color: #56bc5b;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            "
          >
            通过
          </span>
          <span
            v-else-if="row.flag == '3'"
            style="
              background-color: #ceb753;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            "
           >
            待审核
          </span>

          <span
            v-else=""
            style="
              background-color: #e96725;
              display: inline-block;
              border-radius: 5px;
              width: 60px;
              text-align: center;
            "
          >
            拒绝
          </span>
        </template>
      </el-table-column>

      <el-table-column>
        <template #default="{ row }">
          <el-button type="primary" plain :disabled="row.flag!='3'"  @click="gotoShcduling(row)" >去审核</el-button>
          <el-button type="primary" plain :disabled="!(row.flag=='1')"  @click="gotoShcduling(row)" >退回</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { getscheduleapprove } from "@/api/schedulingManage";
import { onMounted, ref ,reactive} from "vue";
import {useRouter} from 'vue-router'
const router = useRouter()

import { schedulingManageStore } from '@/stores/schedulingManage'

const schedulingManageStoreData=schedulingManageStore()

const tableDatalist = ref([]);

const flagval=ref('3')

const loadingvalue=ref(true)

const flagvalchange=(val:any)=>{
  flagval.value=val
  getlist()
}

const optionsflagval=reactive( [

  {
    value: '3',
    label: '待审批',
  },
  {
    value: '1',
    label: '已通过',
  },
  {
    value: '4',
    label: '已拒绝',
  },
])


const getlist=async ()=>{
  tableDatalist.value=[]
  loadingvalue.value=true
  try {
    const res = await getscheduleapprove({
      flag:flagval.value
    });
    if (res.code == "200") {
      res.data.forEach((item: any) => {
        item.forEach((itm: any) => {
          if (itm.flag != 0) {
            tableDatalist.value.push(itm);
          }
        });
      });
      loadingvalue.value=false
    } else {
      console.error("查询失败");
      loadingvalue.value=false
    }
  } catch (error) {
    console.error("查询失败");
    loadingvalue.value=false
  }
}

onMounted(async () => {
  sessionStorage.clear()
  getlist()
});

const gotoShcduling=(row:any)=>{
  const day = row.date_scope.toString().split("-")[0].split(".")
  const gotoday = `${day[0]}-${day[1]}-${day[2]}`
   row.selfid= row.shop_id
  schedulingManageStoreData.setshopData(row)


  sessionStorage.setItem("gotoday", gotoday);
  sessionStorage.setItem("shop_id", row.shop_id);
  sessionStorage.setItem("flag", row.flag);

  
 router.push({
    path: "/schedulingManage/detail"
  });
}
</script>

<style lang="scss" scoped></style>
